<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-使用精灵图拼出feng</title>

  <style>

    span {
      /* 因为span是行内元素标签(没有大小) 我们需要转换为行内块元素 */
      width: 95px;
      height: 115px;
      display: inline-block;
      /* 设置背景不重复 */
      background: url(images/abcd.jpg) no-repeat;
    }

    .f {
      background-position: 0 -138px;
    }

    .e {
      background-position: -482px 0;
    }

    .n {
      width: 110px;
      background-position: -256px -272px;
    }

    .g {
      width: 110px;
      background-position: -95px -133px;
    }
  </style>
</head>
<body>

  <span class="f"></span>
  <span class="e"></span>
  <span class="n"></span>
  <span class="g"></span>
  
</body>
</html>